<template>
    <div class="Goods">
      <div class="Goods__chart__header">
        <el-radio-group class="Goods__chart__header__right">
          <el-radio border :label="3">周报表</el-radio>
          <el-radio border :label="6">月度报表</el-radio>
          <el-radio border :label="9">季度报表</el-radio>
          <el-radio border :label="0">年度报表</el-radio>
        </el-radio-group>
        <div class="Goods__chart__header__left">
            <el-date-picker style="width:128px;margin-right: 32px;" type="date" placeholder="起始日期"></el-date-picker>
            <el-date-picker style="width:128px;" type="date" placeholder="结束日期"></el-date-picker>
        </div>
      </div>
      <div class="head-num">
          <span>商品总数：{{goodsTotal}}</span>
          <span>出货量：{{goodsOutnum}}</span>
      </div>
       <div class="Goods__table">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="leimu_select" label="类目帅选">
            </el-table-column>
            <el-table-column prop="band_select" label="品牌帅选">
            </el-table-column>
            <el-table-column prop="goods_select" label="商品帅选">
            </el-table-column>
            <el-table-column prop="cust_select" label="商家帅选">
            </el-table-column>
            <el-table-column prop="sale_money" label="销售额">
            </el-table-column>
            <el-table-column prop="sale_num" label="销量">
            </el-table-column>
            <el-table-column prop="view_num" label="浏览量">
            </el-table-column>
        </el-table>
    </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                goodsTotal:9999,
                goodsOutnum:99999,
                 tableData: [{
                    leimu_select: '类目',
                    band_select: '品牌',
                    goods_select: '商品名称',
                    cust_select: '商家名称',
                    sale_money:'99.999',
                    sale_num:'99.999',
                    view_num:'99.999',
                },
                {
                    leimu_select: '类目',
                    band_select: '品牌',
                    goods_select: '商品名称',
                    cust_select: '商家名称',
                    sale_money:'99.999',
                    sale_num:'99.999',
                    view_num:'99.999',
                },
                 {
                    leimu_select: '类目',
                    band_select: '品牌',
                    goods_select: '商品名称',
                    cust_select: '商家名称',
                    sale_money:'99.999',
                    sale_num:'99.999',
                    view_num:'99.999',
                }
            ],
            }
        }
    }
</script>

<style lang="scss" scoped>
.Goods {
    padding:20px  30px;
    height:100%;
    background-color: #f5f9fe;
  &__chart {
    &__header {
      padding:30px 20px 10px 20px;
      background-color: #fff;
      line-height: 25px;
      padding-bottom: 15px;
      border-bottom: 1px solid #f2f2f2;
      &__right {
        float: right;
      }
      & /deep/ {
        .el-button--primary {
          border-radius: 9px;
          width: 70px;
          padding: 5px 20px;
        }
        .el-input__icon {
          height: 25px;
          line-height: 25px;
        }
        .el-input__inner{
          height: 25px;
          line-height: 25px;
          background-color: #f0f5fb;
          border-radius: 9px;
          border: none;
        }
        .el-radio-group {
          .is-bordered {
            padding: 0 6px;
            height: 25px;
            line-height: 25px;
            border: none;
            .el-radio__label {
              font-size: 16px;
              color: #409EFF;
            }
          }
        }
      }
    }
  }
  .head-num{
      //padding-left:38px;
      background-color:#fff;
      padding:20px 10px;
     span{
         padding:10px  15px;
     }
  }
  &__table {
      padding: 0px 0;
      & /deep/ {

        .el-table td {
            border: none;
        }
        .el-table th.is-leaf,
        .el-table td {
            border-bottom: none;
            text-align: center;
            font-size: 16px;
        }
        thead {
          th {
            text-align: center;
            color: #4aadfc;
            &:not(:first-child) {
              .cell {
                border-left: 1px solid #c0c4cc;
              }
            }
          }
        }
        form{
            text-align: center;
            .el-form-item{
                width:150px;
                margin: 0 auto;
            }
        }
      }
    }
}

</style>
